<template>
    <a-spin :spinning="confirmLoading">
        <j-form-container :disabled="formDisabled">
            <a-form-model ref="form" :model="model"  :rules="validatorRules" slot="detail">
                <!-- useful_auto_generate_section_start -->

                <a-row>
                    <a-col :span="24">
                        <a-form-model-item label="账号" :labelCol="labelCol_1" :wrapperCol="wrapperCol_1">
                            <a-select
                                    mode="multiple"
                                    v-model="model.token_users"
                                    :options="userOptions"
                                    show-search
                                    option-filter-prop="children"
                                    :filter-option="filterOption"
                                    style="width: 500px"
                                    placeholder="请选择账号"/>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="24">
                        <a-form-model-item label="视频链接" :labelCol="labelCol_1" :wrapperCol="wrapperCol_1">
                            <a-select v-model="model.article_urls" mode="tags" style="width: 500px" placeholder="请输入视频链接"/>
                        </a-form-model-item>
                    </a-col>
                </a-row>




                <a-row>
                    <a-col :span="24">
                        <a-form-model-item label="评论内容"  :labelCol="labelCol_1" :wrapperCol="wrapperCol_1" >
                            <a-textarea v-model="model.content" placeholder="请输入评论内容" />
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <!-- useful_auto_generate_section_end -->

            </a-form-model>
        </j-form-container>
    </a-spin>
</template>


<script>

    import { httpAction, getAction,addYearsToDateString } from '@/api/manage'
    import { getDataOptionList,requestSetData, requestSetOption } from '@/utils/util'
    import { FormMixin } from '@/mixins/FormMixin'
    import moment from 'moment'
    import {requestSetOptions} from "../../../utils/util";

    export default {
        name: 'CommentForm',
        mixins: [ FormMixin],
        components: {
        },
        props: {
            //表单禁用
            disabled: {
                type: Boolean,
                default: false,
                required: false
            }
        },
        data () {
            return {
                model:{
                },
                confirmLoading: false,
                validatorRules: {
                },
                //useful_auto_generate_section_start
                statusOptions:getDataOptionList('commentStatusList'),
                activeOptions:getDataOptionList('commentActiveList'),
                userOptions:[],
                //useful_auto_generate_section_end
                positionOptions:[],
                url: {
                    add: "/comment/save",
                    edit: "/comment/update",
                    queryById: "/comment/detail"
                },
                filter:(inputValue, path) => {
                    return path.some(option => option.title.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
                },
            }
        },
        computed: {
            formDisabled(){
                return this.disabled
            },
        },
        created () {
            let $this = this;
            //useful_auto_generate_section_start
            requestSetOptions("/token/listAll?active=1",{},function(options){$this.userOptions=options;},{label:'user',value:'user'});
            //useful_auto_generate_section_end
            // requestSetData("/system/anonymous/dataDict/listTree",{value:'commentPosition',idToValue:true},function(options){$this.positionOptions=options[0].children;},{});

            //备份model原始值
            this.modelDefault = JSON.parse(JSON.stringify(this.model));


        },
        methods: {
            add () {
                this.edit(this.modelDefault);
            },
            edit (record) {
                this.model = Object.assign({}, record);
                this.model.token_users = record.token_users.split(',')
                this.model.article_urls = record.article_urls.split(',')
                this.visible = true;
            },
            handleChange(value) {
                // console.log(`selected `);
            },

            filterOption(input, option) {
                return (
                    option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
                );
            },
            onChange(e) {
                console.log('radio1 checked', e.target.value);
            },
            handleDateChange(value,options) {
                console.log("timeValue="+value);
                // let dateArray = value.toString().split(",")
                let format = options['format'] || 'YYYY-MM-DD';
                let frmtValue = value.format(format);
                let gmtExpire = addYearsToDateString(frmtValue,5);
                this.model.gmtExpire = gmtExpire;
            },
            submitForm () {
                const that = this;
                // 触发表单验证
                this.$refs.form.validate(valid=>{
                    if (valid) {
                        that.confirmLoading = true;
                        let httpurl = '';
                        if(!this.model.id){
                            httpurl+=this.url.add;
                        }else{
                            httpurl+=this.url.edit;
                        }
                        httpAction(httpurl,this.model,"post").then((res)=>{
                            if(res.success){
                                that.$message.success(res.message);
                                that.$emit('ok');
                            }else{
                                that.$message.warning(res.message);
                            }
                        }).finally(() => {
                            that.confirmLoading = false;
                        })
                    }

                })
            },
        }
    }
</script>
